<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程 => 分析解决需要的步骤,让后通过变量和函数一一实现,使用时依次调用即可 (遇到什么问题就解决什么问题)

    // 面向对象 => 将我们的需求抽象为对象,然后针对这个对象分析它的特征和行为  => 这个对象就称之为类

    // 面向对象的三大特征: 封装 继承 多态

    // 面向对象封装 => 自定义构造函数


    function Cat(name, color) {
        // {}
        // {}[[Prototype]] = Cat.prototype   {}.__proto__ = Cat.prototype  => 所有的实例化对象都有原型属性([[Prototype]]) => 指向构造函数的原型对象(prototype)
        // this -> {}   强制将this指向创建的实例化对象

        this.name = name;
        this.color = color;

        // return this;
    }

    // console.dir(Cat);
    // Cat.protptype = {contructor:Cat} 

    // protptype(原型对象 => 对象) => 存储所有实例化对象共有的属性和方法  => 供所有的实例化对象访问

    Cat.prototype.species = "Cat";
    Cat.prototype.call = function () {
        console.log("喵喵");
    }
    Cat.prototype.skill = function () {
        console.log("捉老鼠");
    }
    Cat.prototype.say = function () {
        // this指向问题
        console.log(this.name, this.color);
    }


    // Tom -> Tom[[Prototype]](Cat.prototype) 
    var Tom = new Cat("Tom", "black");
    console.log(Tom);
    console.log(Tom instanceof Cat);
    console.log(Tom.constructor === Cat);



    // 晚上任务
    // 1. 面向对象总结
    // 2. this指向总结 !!!!!!!!!!
    // 3. 元素拖拽 => 提前写(面向过程 改 面向对象) 
</script>

</html>